import React from 'react';
import './Tabstyle_3.css';
import 'rc-tabs/assets/index.css';
import { isEqual, isEmpty } from 'lodash';
import Menu, {SubMenu, MenuItem} from 'rc-menu';

class Tabstyle_3 extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            tabid: props.datas.currentTab,
            rcMenuLoaded : false,
        }
        this.handleTabData = this.handleTabData.bind(this);
    }

    handleTabData(tabid){
        const { datas={} } = this.props;
        const { handleTabData={} } = datas;
        handleTabData(tabid);
        this.setState({
            tabid: tabid
        });
    }

    componentWillReceiveProps(nextProps){
        const { tabid } = this.state;
        if(!isEqual(tabid, nextProps.datas.currentTab)){
            this.setState({
                tabid: nextProps.datas.currentTab
            })
        }
    }

    componentWillMount(){
        loadjs.isDefined("rc-menu") ? loadjs.ready('rc-menu',()=>{
            this.setState({rcMenuLoaded:true})
        }) : loadjs(['/cloudstore/resource/pc/rc-menu/rc-menu.js','/cloudstore/resource/pc/rc-menu/rc-menu.css'],'rc-menu',()=>{
            this.setState({rcMenuLoaded:true})
        })
    }



    render(){

        const { datas={}, fontStyle, ebaseid = '' } = this.props;
        const { tabid } = this.state;
        const { currentTab, tabids = [], titles = [],
            methodvalue,tabwidth,counts, config={}, isShowSettingShowType='0',tabstyle, tabvalue} = datas;
        const { item={} } = config;
        const { header={} } = item;

        const {rcMenuLoaded} = this.state

        if(!rcMenuLoaded){return null;}



        if(isEmpty(datas)) return <div/>;
        const tdStyle={width: 'auto', verticalAlign: 'top',backgroundSize: '100% 100%', height: '44px', lineHeight: '44px', paddingTop: '0px',padding:'0px 0px'};
        const tdStyle1={width: 'auto', marginRight: '10px', verticalAlign: 'top',backgroundSize: '100% 100%', height: '44px', lineHeight: '44px', paddingTop: '0px'};
        let style = {marginLeft: '10px', marginRight: '10px',display:'inline-block'};
        let style1 = {width: tabwidth + 'px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', display: 'inline-block'};
        let titleStyle = {width: '100%'};
        let style2 = {display:'inline-block'};
        let tabLeftStyle={display:'none',width:'15px',backgroundColor:'#00A9FF',height:'44px',lineHeight:'44px'}
        let tabWidthStyle
        let divTextStyle

        if(methodvalue==2){
            tabWidthStyle={overflow:'hidden',textOverflow:'ellipsis',whiteSpace: 'nowrap',height:'44px'}
            divTextStyle={overflow:'hidden',textOverflow:'ellipsis',whiteSpace: 'nowrap',lineHeight:'44px'}
        }else if(methodvalue != ""){
            tabWidthStyle={width:tabwidth+'px',overflow:'hidden',textOverflow:'ellipsis',whiteSpace: 'nowrap',height:'44px'}
            divTextStyle={overflow:'hidden',textOverflow:'ellipsis',whiteSpace: 'nowrap',lineHeight:'44px',width:'100%'}
        }



        let tHtml_new = (
            <div className="commonTab style_3_Tab">
            <div
                className="tabcontainer tab2"
                style={titleStyle} >
                <window.rcMenu.Menu ecId={`${this && this.props && this.props.ecId || ''}_rcMenu.Menu@flj6pa`}
                    mode = "horizontal"
                    overflowedIndicator= {React.createElement("div", {
                    width:"16px",
                    height:"16px",
                    className:"img"

            })}

            >
        {
            titles.map((title, i)=> {
                if ((ebaseid == '8') && counts && counts[i] !== -1 && counts[i] !== '' && counts[i] !== null) {
                    if(counts[i] > 99){
                        title +='(99+)';
                    }else {
                        title +=' (' + counts[i] + ')';
                    }
                }else if (ebaseid == 'blogStatus' &&
                    counts && '0'!== counts[i]) {
                    title += ' (' + counts[i] + ')';

                }else if(ebaseid == '7_DY'&& counts && '0'!== counts[i]){
                    title += ' (' + counts[i].noReadNum + ')';
                }else if(isShowSettingShowType == '1' && ebaseid == '7'&& counts && counts[i] && counts[i].noReadNum){
                    title += ' (' + counts[i].noReadNum + ')';
                }else if(ebaseid == '7'&& counts && counts[i] && counts[i].isHaveNoRead && counts[i].isHaveNoRead == '1'){
                    title =  title;
                }
                const className = tabids[i] == tabid ? `tab2selected wea-f${fontStyle.tab1fontsize || 1}` : `tab2unselected wea-f${fontStyle.tab2fontsize || 1}`;
                const pointClassName = ebaseid == '7'&& counts && counts[i] && counts[i].isHaveNoRead && counts[i].isHaveNoRead == '1' ? 'portal-new-unreadpoint' : '';
                return  <window.rcMenu.Menu.MenuItem ecId={`${this && this.props && this.props.ecId || ''}_rcMenu.Menu.MenuItem@3d9kgl@${tabids[i]}`}
                title={title}
                className={className}
                onClick={() => this.handleTabData(tabids[i])}
            >
            <div style={tabWidthStyle} >
                    <div className={"divText"} style={divTextStyle}>{title}</div>
                    <span className={pointClassName}></span>
                    </div>
                    </window.rcMenu.Menu.MenuItem>
            })
        }
    </window.rcMenu.Menu>
        </div>
        </div>
    )
        return tHtml_new;
    }
}
export default Tabstyle_3;